<template>
  <div class="main_box" style="padding-right:10px">
      <div class="add_wrap">
          <div class="tit">
            <h2>{{dataForm.safetyId?'编辑安全设备':'新增安全设备'}}</h2>
            <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
          </div>
          <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
              <el-row>
                  <el-form-item label="设备名称" prop="equipName">
                    <el-input   v-model="dataForm.equipName" @keydown.native="keydown($event)"></el-input>
                  </el-form-item>
                  <el-form-item label="设备昵称" >
                    <el-input   v-model="dataForm.equipNickName" @keydown.native="keydown($event)"></el-input>
                  </el-form-item>
                  <el-form-item label="设备类型" prop="safetyType">
                    <el-select   v-model="dataForm.safetyType" clearable filterable>
                        <el-option v-for="item in safetyTypeList" :key="item.id" :value="item.id" :label="item.name">
                        </el-option>
                    </el-select>
                  </el-form-item>
                   <el-form-item label="MAC地址" prop="equipMac">
                    <el-input   v-model="dataForm.equipMac"></el-input>
                  </el-form-item>
                  <el-form-item label="地区" prop="streetIds">
                    <Region
                        ref="region"
                        :streetValues="dataForm.streetIds"
                        @regionChange="handleItemChange"
                        :isChangeOnSelect="true"
                    ></Region>
                </el-form-item>
                <el-form-item label="小区" prop="villageId" >
                      <el-select
                         v-model="dataForm.villageId"
                         @change="handleVillageChange"
                         @focus="handleVillageFocus"
                          clearable>
                          <el-option v-for="item in villageList" :value="item.id" :label="item.name" :key="item.id">

                          </el-option>
                      </el-select>
                </el-form-item>
                <el-form-item label="设备地址" prop="houseId">
                    <el-select placeholder="请选择设备地址"
                        filterable
                        v-model="dataForm.houseId"
                        clearable
                        @focus="handleHouseholdFocus"
                       >
                        <el-option
                        v-for="item in houseList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="备注">
                    <el-input type="textarea" v-model="dataForm.remark"></el-input>
                  </el-form-item>
              </el-row>
              <el-row>
                    <el-form-item>
                    <el-button plain type="primary" @click="sureClick">保 存</el-button>
                    <el-button plain @click="returnList">取 消</el-button>
                    </el-form-item>
              </el-row>
          </el-form>
      </div>
  </div>
</template>

<script>
import * as message from "@/constants/message";
import SafetyApi from '@/api/equip/safety';
import Region from "@/components/Region"
import VillageApi from "@/api/address/village"
import DeviceLocationApi from "@/api/address/deviceLocation";

export default {
    name:"SafetyAdd",
    data(){
        return{
            dataForm:{
                safetyId:"",
                equipName:"",
                equipNickName:"",
                safetyType:"",
                equipMac:"",
                villageId:"",
                villageName:"",
                streetIds:[],
                provinceId: "",
                provinceName: "",
                cityId: "",
                cityName: "",
                areaId: "",
                areaName: "",
                streetId:'',
                streetName:'',
                houseId:"",
                remark:"",
            },
            safetyTypeList:[//设备类型列表
                {id:1,name:"燃气报警器"},
                {id:2,name:"溢水报警器"},
                {id:3,name:"烟雾报警器"},
                {id:4,name:"温湿度报警器"},
                {id:5,name:"红外报警器"},
                {id:6,name:"门磁检测报警器"}
            ],
            villageList:[],
            houseList:[],
            roleRules: {
                /*equipName: [
                    { required: true, message: "请输入设备名称", trigger: "blur" },
                ],*/
                equipMac: [
                    { required: true, message: "请输入MAC地址", trigger: "blur" },
                ],
                safetyType:[
                    {required:true,message:"请选择设备类型",trigger:"change"}
                ],
                houseId:[
                     {required:true,message:"请选择设备地址",trigger:"change"}
                ]
            },
        }
    },
    components:{
        Region
    },
    mounted(){
        this.init();
    },
    methods:{
        init(){
            if (this.$route.query.id) {
                this.dataForm.safetyId = this.$route.query.id
                this.getData();
            }
        },
        keydown(e) {
            if (e.keyCode == 32) {
                e.returnValue = false;
            }
        },
        getData(){
            var cond ={
                id: this.dataForm.safetyId
            }
            SafetyApi.getSafetyInfo(cond)
                .then(res =>{
                    this.$Utils.bindingBean(this.dataForm, res.data)

                    this.dataForm.streetIds = [
                        this.dataForm.provinceId,
                        this.dataForm.provinceName,
                        this.dataForm.cityId,
                        this.dataForm.cityName,
                        this.dataForm.areaId,
                        this.dataForm.areaName,
                        this.dataForm.streetId,
                        this.dataForm.streetName
                    ]
                     this.houseList = [{id:res.data.houseId,name:res.data.houseName}]
                     this.villageList = [{id:res.data.villageId,name:res.data.villageName}]
                })
        },
        handleItemChange(val) {
            this.dataForm.villageId = ""
            this.dataForm.villageName = ""
            this.villageList = []
            this.dataForm.provinceId = val.provinceId;
            this.dataForm.provinceName = val.provinceName;
            this.dataForm.cityId = val.cityId;
            this.dataForm.cityName = val.cityName;
            this.dataForm.areaId = val.areaId;
            this.dataForm.areaName = val.areaName;
            this.dataForm.streetId = val.streetId
            this.dataForm.streetName = val.streetName
            if(val.provinceId){
                // 如果仅仅是修改地区，而不是删除，那么就要清空住户
                this.dataForm.houseId = ""
                this.houseList = []

                this.dataForm.streetIds = [
                    val.provinceId,
                    val.cityId,
                    val.areaId,
                    val.streetId,
                    ];
            }else{
                this.dataForm.streetIds = []
            }
        },
         handleVillageChange(){

            if(this.dataForm.villageId){
                this.dataForm.villageName = this.villageList.find(item=>item.id==this.dataForm.villageId).name
                this.dataForm.houseId = ""
                this.houseList = []
            }else{
                //每次丢该改小区都需要获取到名字
                this.dataForm.villageName = ""
            }
        },
        handleVillageFocus(){
            // 点击聚焦小区的时候才发送请求数据
            if(this.dataForm.streetIds.length>0){
                let param = {
                provinceId:this.dataForm.provinceId,
                cityId:this.dataForm.cityId,
                areaId:this.dataForm.areaId,
                streetId:this.dataForm.streetId,
                name:"",
                }
                VillageApi.villageList(param).then(res=>{
                   this.villageList = res.data
                })
            }
        },
        handleHouseholdFocus(){
            let param = {
                provinceId:this.dataForm.provinceId,
                cityId:this.dataForm.cityId,
                areaId:this.dataForm.areaId,
                streetId:this.dataForm.streetId,
                villageId:this.dataForm.villageId
            }
                DeviceLocationApi.listHouseInfo(param).then(res=>{
                this.houseList = res.data
            })

        },
        sureClick(){
            // 提交
            this.$refs.dataForm.validate(valid =>{
            if(valid) {
                    this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
                        .then(() => {
                            if(this.dataForm.safetyId){
                                this.editData();
                            }else{
                                this.addData();
                            }
                        });
                }
            })
        },
        editData(){
            // 编辑
            var cond = {
                safetyId:this.dataForm.safetyId,
                equipName:this.dataForm.equipName,
                equipNickName:this.dataForm.equipNickName,
                safetyType:this.dataForm.safetyType,
                equipMac:this.dataForm.equipMac,
                houseId:this.dataForm.houseId,
                remark:this.dataForm.remark,
            }
            if(this.$route.query.hasOwnProperty("equipState")){
                // 是从设备开放池来的就添加设备状态参数
                cond.equipState = this.$route.query.equipState
            }
            SafetyApi.editSafety(cond)
                .then(data =>{
                    this.$Utils.notifySuccess();
                    this.returnList();
                })
        },
        addData(){
            // 新增
            var cond = {
                equipName:this.dataForm.equipName,
                equipNickName:this.dataForm.equipNickName,
                safetyType:this.dataForm.safetyType,
                equipMac:this.dataForm.equipMac,
                houseId:this.dataForm.houseId,
                remark:this.dataForm.remark,
            }
            SafetyApi.addSafety(cond)
                .then(data =>{
                    this.$Utils.notifySuccess();
                    this.returnList();
                })
        },
        returnList(){
            // 返回上一界面
            this.$store.dispatch('delView', this.$route);
            if(this.$route.query.hasOwnProperty("equipState")){
                // 如果是从设备开放池来的就返回到那里去
                this.$router.push({ path:'/equip/equipOpenPool'})
            }else{
                this.$router.push({ path:'/equip/safetyManagement'})
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
<style  lang="scss">


</style>
